<template>
	<view class="container margin-sm">
		<view class="cuIcon-back" @tap="prevPage"></view>
		<view class="cuIcon-right" @tap="nextPage"></view>
		<view @tap="setTheme">设置主题</view>
		<view @tap="setFontSize">设置字体</view>
		<view id="viewer"></view>
	</view>
</template>

<script>
// https://github.com/futurepress/epub.js/blob/master/documentation/md/API.md#themes
import Epub from 'epubjs'
	export default {
		data() {
			return {
				book:'',
				rendition:'',
				themes:'',
				fontSizeList:[12,14,16,20],
				defaultFontSize:12,
			};
		},
		onLoad(){
			let url='/static/epub/demo.epub';
			  this.book = new Epub(url);
			  console.log(this.book)
              this.rendition = this.book.renderTo('viewer',{
                width:window.innerWidth,
                height:window.innerHeight
            })
            // 通过Rendition.display渲染电子书
            this.rendition.display();
            this.themes = this.rendition.themes
            // 设置默认字体
            this.setFontSize(this.defaultFontSize)
		},
		methods: {
			prevPage() { //上一页
			    if (this.rendition) {
			      this.rendition.prev()
			    }
  			},
  			nextPage() { //下一页
		    if (this.rendition) {
		      this.rendition.next()
    		}
  		  },
		  // setTheme(){
		  // 	this.themes=new Themes(this.rendition)
		  // 	this.themes.register("light", { "body": { "color": "purple"}})
		  // },
		    setFontSize(fontSize){
            this.defaultFontSize = 12
            if(this.themes){
                this.themes.fontSize(20 + 'px')
            }
        },

		}
	}
</script>

<style>

</style>
